<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户签到 - 农业银行</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #fff; /* 背景色设置为白色 */
            margin: 0;
            padding: 0;
            color: #333;
        }
        .container {
            width: 90%;
            max-width: 600px;
            margin: 20px auto; /* 页面顶部和底部留白 */
            background-color: #fff; /* 背景色保持白色 */
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            box-sizing: border-box;
        }
        h1 {
            text-align: center;
            margin-bottom: 20px;
            color: #008f47; /* 农业银行绿色 */
            font-size: 1.5rem; /* Responsive font size */
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            font-size: 1rem; /* Responsive font size */
        }
        .form-group input {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem; /* Responsive font size */
        }
        .form-group input.error {
            border-color: #e74c3c; /* Red border for error */
        }
        .form-group button {
            width: 100%;
            padding: 12px;
            background-color: #008f47; /* 农业银行绿色 */
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem; /* Responsive font size */
            transition: background-color 0.3s ease;
        }
        .form-group button:hover {
            background-color: #007d3d;
        }
        .message {
            display: none;
            padding: 15px;
            margin-top: 20px;
            border-radius: 4px;
            text-align: center;
            font-weight: bold;
            font-size: 1rem; /* Responsive font size */
        }
        .message.success {
            background-color: #d4edda;
            color: #155724;
        }
        .message.error {
            background-color: #f8d7da;
            color: #721c24;
        }
        @media (max-width: 768px) {
            .container {
                width: 95%;
                padding: 15px;
            }
            h1 {
                font-size: 1.25rem;
            }
            .form-group label, .form-group input, .form-group button {
                font-size: 0.9rem;
            }
        }
        @media (max-width: 480px) {
            h1 {
                font-size: 1.1rem;
            }
            .form-group label, .form-group input, .form-group button {
                font-size: 0.85rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>用户签到</h1>
        <div class="form-group">
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name">
        </div>
        <div class="form-group">
            <label for="phone">手机号:</label>
            <input type="text" id="phone" name="phone" maxlength="11">
        </div>
        <div class="form-group">
            <button type="button" onclick="checkIn()">签到</button>
        </div>
        <div id="message" class="message"></div>
    </div>

    <script>
        function showMessage(type, text) {
            const messageDiv = document.getElementById('message');
            messageDiv.className = `message ${type}`;
            messageDiv.textContent = text;
            messageDiv.style.display = 'block';
        }

        function resetInputStyles() {
            document.querySelectorAll('.form-group input').forEach(input => {
                input.classList.remove('error'); // Reset error styles
            });
        }

        function validateFields() {
            const name = document.getElementById('name').value.trim();
            const phone = document.getElementById('phone').value.trim();
            let valid = true;

            resetInputStyles(); // Reset all input styles

            if (!name && !phone) {
                showMessage('error', '请填写姓名和手机号');
                document.getElementById('name').classList.add('error'); // Highlight invalid input
                document.getElementById('phone').classList.add('error'); // Highlight invalid input
                valid = false;
            } else if (!name) {
                showMessage('error', '请输入姓名');
                document.getElementById('name').classList.add('error'); // Highlight invalid input
                valid = false;
            } else if (!phone) {
                showMessage('error', '请输入手机号');
                document.getElementById('phone').classList.add('error'); // Highlight invalid input
                valid = false;
            } else if (phone.length !== 11) {
                showMessage('error', '手机号必须为11位');
                document.getElementById('phone').classList.add('error'); // Highlight invalid input
                valid = false;
            }

            return valid;
        }

        function checkIn() {
            const name = document.getElementById('name').value.trim();
            const phone = document.getElementById('phone').value.trim();

            if (validateFields()) { // Validate fields before making the request
                fetch('http://127.0.0.1:5000/checkin', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ name, phone })
                })
                .then(response => response.json())
                .then(data => {
                    showMessage('success', '签到成功');
                    document.getElementById('name').value = '';
                    document.getElementById('phone').value = '';
                })
                .catch(error => {
                    console.error('Error:', error);
                    showMessage('error', '签到失败');
                });
            }
        }

        // Event listeners to validate fields on blur
        document.getElementById('name').addEventListener('blur', () => {
            const name = document.getElementById('name').value.trim();
            if (!name) {
                showMessage('error', '请输入姓名');
                document.getElementById('name').classList.add('error');
            } else {
                document.getElementById('name').classList.remove('error');
                // Prompt to enter phone number if phone is empty
                if (!document.getElementById('phone').value.trim()) {
                    showMessage('error', '请输入手机号');
                    document.getElementById('phone').classList.add('error');
                }
            }
        });

        document.getElementById('phone').addEventListener('blur', () => {
            const phone = document.getElementById('phone').value.trim();
            if (!phone) {
                showMessage('error', '请输入手机号');
                document.getElementById('phone').classList.add('error');
            } else if (phone.length !== 11) {
                showMessage('error', '手机号必须为11位');
                document.getElementById('phone').classList.add('error');
            } else {
                document.getElementById('phone').classList.remove('error');
                // Prompt to enter name if name is empty
                if (!document.getElementById('name').value.trim()) {
                    showMessage('error', '请输入姓名');
                    document.getElementById('name').classList.add('error');
                }
            }
        });
    </script>
</body>
</html>
